import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:im_app/im/emojiOne/EmojiOneInfoes.dart';

import 'EmojiOne.dart';

typedef SelectCallback = void Function(BuildContext context, EmojiOne emojiOne);

class EmojiPane extends StatefulWidget {

  final SelectCallback selectCallback;
  final BuildContext context;

  const EmojiPane({ required this.selectCallback,  required this.context, super.key});

  @override
  State<StatefulWidget> createState() => EmojiState();
}

class EmojiState extends State<EmojiPane> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  double sigmaSize = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 240,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          TabBar(
              controller: this._tabController,
              // 下划线的大小
              tabs: <Widget>[
                _buildTabBar("1f603"),
                _buildTabBar("1f34e"),
                _buildTabBar("1f436"),
                _buildTabBar("26bd"),
                _buildTabBar("2708"),
                _buildTabBar("1f4a1"),
                _buildTabBar("269b"),
                _buildTabBar("1f1e7"),
              ]),
          SizedBox(
            height: 200,
            child: TabBarView(controller: this._tabController, children: <Widget>[
              _buildTabBarBody('people'),
              _buildTabBarBody('nature'),
              _buildTabBarBody('food'),
              _buildTabBarBody('activity'),
              _buildTabBarBody('travel'),
              _buildTabBarBody('objects'),
              _buildTabBarBody('symbols'),
              _buildTabBarBody('flags'),
            ]),
          )
        ],
      ),
    );
  }

  Tab _buildTabBar(String emojiUnicode) {
    EmojiOne? emojiOne = EmojiOneInfoes.getInstance().getByUnicode(emojiUnicode);
    return Tab(icon: _buildTabBarIcon(emojiOne!), height: 30);
  }

  Widget _buildTabBarBody(String category) {
    List<EmojiOne> emojiOneList = EmojiOneInfoes.getInstance().emojiFromCategory(category);
    return GridView.builder(
        padding: const EdgeInsets.only(left: 10, right: 10),
        itemCount: emojiOneList.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 10, mainAxisSpacing: 10,
            crossAxisSpacing: 10),
        itemBuilder: (BuildContext context, int index) => _buildEmojiIcon(emojiOneList.elementAt(index),));
  }

  Widget _buildTabBarIcon(EmojiOne emojiOne) {
    return Image.asset(emojiOne.emojiPath,
      width: 25,
      height: 25,
    );
  }

  Widget _buildEmojiIcon(EmojiOne emojiOne) {
    return InkWell(
      onTap: (){
        widget.selectCallback(context, emojiOne);
      },
      child: EmojiIconView(emojiOne: emojiOne),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
}

class EmojiIconView extends StatefulWidget {
  final EmojiOne emojiOne;

  const EmojiIconView({required this.emojiOne, super.key});

  @override
  State<StatefulWidget> createState() => EmojiIconState();

}

class EmojiIconState extends State<EmojiIconView> {

  double sigmaSize = 0;
  double scaleSize = 1;

  @override
  Widget build(BuildContext context) {
    return buildEmojiIcon();
  }

  Widget buildEmojiIcon() {
    return ImageFiltered(
      imageFilter: ImageFilter.blur(sigmaX: sigmaSize, sigmaY: sigmaSize),
      child: Image.asset(widget.emojiOne.emojiPath,
        width: 20,
        height: 20,
      ),
    );
  }
}
